<template>
  <el-dialog v-model="visible"
             title="调拨单详情"
             @close="handleClose"
             :before-close="handleBeforeClose"
             width="60%"
             :modal="true"
             custom-class="dialog-with-scroll">

    <el-form :model="order" label-width="120px" class="demo-form">
      <el-form-item label="调拨单号"><span>{{ order.allocationNo }}</span></el-form-item>
      <el-form-item label="运输单号">
        <span>{{ order.trackingNo }}</span>
      </el-form-item>
      <el-form-item label="物流商编号">
        <span>{{ order.deliveryCode }}</span>
      </el-form-item>
      <el-form-item label="物流商姓名">
        <span>{{ order.deliveryName }}</span>
      </el-form-item>
      <el-form-item label="发货地">
        <span>{{ order.origin }}</span>
      </el-form-item>
      <el-form-item label="目的地">
        <span>{{ order.destination }}</span>
      </el-form-item>
      <el-form-item label="总重量">
        <span>{{ order.weight }} {{ order.weightUnit }}</span>
      </el-form-item>
      <el-form-item label="仓库编号">
        <span>{{ order.warehouseNo }}</span>
      </el-form-item>
      <el-form-item label="调拨日期">
        <span>{{ formatDate(order.allocationDate) }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <span>{{ order.state }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ order.createdTime ? formatDate(order.createdTime) : '无' }}</span>
      </el-form-item>
      <el-form-item label="修改时间">
        <span>{{ order.modifiedDate ? order.modifiedDate : '无' }}</span>
      </el-form-item>
      <el-form-item label="修改人">
        <span>{{ order.modifiedBy ? order.modifiedBy : '无' }}</span>
      </el-form-item>
      <el-form-item label="备注">
        <span>{{ order.remarks ? order.remarks : '无' }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { ref, defineComponent, watch } from 'vue';

export default defineComponent({
  name: 'AllocationDetailComponent',
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    order: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    const visible = ref(props.modelValue);
    const formatDate = (value) => {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    const handleClose = () => {
      emit('update:modelValue', false);
    };
    const handleBeforeClose = (done) => {
      emit('update:modelValue', false); // 关闭时触发更新父组件的状态
      done();
    };

    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal;
    });

    return {
      formatDate,
      handleClose,
      handleBeforeClose,
      visible
    };
  }
});
</script>

<style scoped>
.demo-form {
  display: flex;
  flex-wrap: wrap;
}

.demo-form .el-form-item {
  width: 50%;
  box-sizing: border-box;
}

.demo-form .el-form-item:nth-child(odd) {
  padding-right: 10px;
}

.demo-form .el-form-item:nth-child(even) {
  padding-left: 10px;
}
</style>
